<template>
  <div class="back-div title-box" :style="style">
    <div class="item-title">
      <template v-if="$slots.header">
        <slot name="header"></slot>
      </template>
      <template v-else>
        <i :class="props.iconClass" class="title-icon"></i>
        <span>{{ props.title }}</span>
        <template v-if="$slots.headerRight">
          <div class="rightContent">
            <slot name="headerRight"></slot>
          </div>
        </template>
      </template>
    </div>
    <div class="main-div p-4">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  interface CoilEchartsType {
    width?: string;
    height?: string;
    title?: string;
    iconClass?: string;
  }
  const props = withDefaults(defineProps<CoilEchartsType>(), {
    width: '100%',
    height: '100%',
    title: '',
    iconClass: 'fa fa-caret-right',
  });

  const style = computed(() => {
    return `width:${props.width};height:${props.height}`;
  });
</script>

<style scoped>
  @import '@/assets/coil-icon/iconfont.css';
  .title-box {
    display: flex;
    flex-direction: column;
  }
  .title-icon {
    margin-right: 0.5rem;
    font-size: 1.2rem;
    color: var(--m-blue);
  }
  .item-title {
    font-size: 1rem;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #ccc;
    padding: 0 1rem;
  }
  .item-title span {
    font-weight: bold;
  }
  .main-div {
    flex-grow: 1;
    overflow-y: auto;
    height: auto;
  }
  .rightContent {
    float: right;
  }
</style>
